<template>
  <div>
    <div class="modal">
      <div class="modal-content">
        <div class="dataHead">
          <div class="dataHeadTit dataHeadTitop">
            <div>
              <img src="../assets/images/point.png" alt="" />
              木城社区 {{ buildId }}
            </div>
            <div class="dataEdit">
              <div v-show="edit">
                <el-button
                  icon="el-icon-check"
                  circle
                  @click="toSubmit"
                ></el-button>
              </div>
              <div v-show="!edit">
                <el-button
                  icon="el-icon-edit"
                  circle
                  @click="toEdit"
                ></el-button>

                <el-button
                  icon="el-icon-close"
                  circle
                  @click="toBack"
                ></el-button>
              </div>
            </div>
          </div>
          <img class="splitLine" src="../assets/images/Divider4.png" />
        </div>
        <div class="modal-body" v-if="edit">
          <el-input
            :disabled="!edit"
            v-model="formSeta.value1"
            placeholder="输入楼栋管理人员信息"
          ></el-input>
          <el-input
            :disabled="!edit"
            v-model="formSeta.value2"
            placeholder="输入楼栋管理人员信息"
          ></el-input>
          <el-input
            :disabled="!edit"
            v-model="formSeta.value3"
            placeholder="输入楼栋管理人员信息"
          ></el-input>
          <el-input
            :disabled="!edit"
            v-model="formSeta.value4"
            placeholder="输入楼栋管理人员信息"
          ></el-input>
          <el-input
            :disabled="!edit"
            v-model="formSeta.value5"
            placeholder="输入楼栋管理人员信息"
          ></el-input>
          <el-input
            :disabled="!edit"
            v-model="formSeta.value6"
            placeholder="输入楼栋管理人员信息"
          ></el-input>
        </div>
        <div class="modal-body" v-else>
          <el-input
            v-for="(item, index) in dataList"
            :key="index"
            :disabled="!edit"
            v-model="dataList[index]"
          ></el-input>
        </div>
        <!-- <div class="modal-footer" v-if="edit">
          <el-button @click="edit = false">取消</el-button>
          <el-button type="primary" @click="toSubmit">保存</el-button>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "InfoEdit",
  props: {
    buildId: {
      type: String,
      default: "null",
    },
  },
  data() {
    return {
      formSeta: {
        value1: "",
        value2: "",
        value3: "",
        value4: "",
        value5: "",
        value6: "",
      },
      edit: false,
      dataList: [],
    };
  },
  mounted() {
    this.getStorage();
  },
  methods: {
    getStorage() {
      this.$axios.getbuildinfo({ buildName: this.buildId }).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.dataList = res.data;
          if (res.data.length != 0) {
            this.formSeta.value1 = res.data[0] ? res.data[0] : "";
            this.formSeta.value2 = res.data[1] ? res.data[1] : "";
            this.formSeta.value3 = res.data[2] ? res.data[2] : "";
            this.formSeta.value4 = res.data[3] ? res.data[3] : "";
            this.formSeta.value5 = res.data[4] ? res.data[4] : "";
            this.formSeta.value6 = res.data[5] ? res.data[5] : "";
          }
        }
      });
    },
    toEdit() {
      this.edit = true;
    },
    toBack() {
      this.$emit("toCloseInfoEdit", false);
    },
    backData() {
      this.formSeta = {
        value1: "",
        value2: "",
        value3: "",
        value4: "",
        value5: "",
        value6: "",
      };
    },
    toSubmit() {
      let arr = [];
      arr.push(this.formSeta.value1);
      arr.push(this.formSeta.value2);
      arr.push(this.formSeta.value3);
      arr.push(this.formSeta.value4);
      arr.push(this.formSeta.value5);
      arr.push(this.formSeta.value6);
      arr.filter(Boolean);
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] == "" || arr[i] == null || typeof arr[i] == undefined) {
          arr.splice(i, 1);
          i = i - 1;
        }
      }
      // console.log(arr);
      axios
        .post("/zz/build", {
          buildName: this.buildId,
          buildInfos: arr,
        })
        .then((res) => {
          // console.log(res.data);
          if (res.data.code == 200) {
            this.$message.success("信息更新成功");
            this.getStorage();
            this.edit = false;
            this.backData();
          } else {
            this.$message.error("信息更新失败");
            this.getStorage();
            this.edit = false;
            this.backData();
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.modal {
  height: 295px;
  width: 640px;
  background: url("../assets/images/dialogBg.png");
  background-repeat: no-repeat;
  position: relative;
}

.dataHead {
  text-align: center;
  font-size: 22px;
  font-weight: 400;
  height: 85px;
  .dataHeadTit {
    text-align: left;
    margin: 0 30px 20px 30px;
    .dataEdit {
      display: flex;
      justify-content: flex-end;
    }
  }
  .dataHeadTitop {
    padding: 20px 0px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
  }
  .splitLine {
    position: relative;
    top: -28px;
  }
}
.modal-content {
  position: relative;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.modal-body {
  padding: 15px;
  display: flex;
  // justify-content: space-around;
  flex-wrap: wrap;
  .el-input {
    width: 280px;
    margin: 0 20px 20px 0;
  }
}
.modal-footer {
  border-top: 1px solid #f0f0f0;
  padding: 10px 16px;
  text-align: right;
}
</style>
